<template>
  <div>
    <!-- 已完成订单详情 -->
    <div v-if="orderDetailStatus === 0">
      <finish-order />
    </div>
    <!-- 未生成 订单详情 -->
    <div v-else>
      <undone-order />
      <div class="flex btn-group-box flex-center mar-t-30">
        <span class="generate-btn flex flex-center cursor-p">生成</span>
        <span class="synchronize-btn flex flex-center mar-l-20 cursor-p">重新同步</span>
        <span class="next-btn mar-l-19 cursor-p">下一笔</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import FinishOrder from './components/FinishOrder/index.vue'
import UndoneOrder from './components/UndoneOrder/index.vue'
import { defineComponent } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({
  components: {
    FinishOrder,
    UndoneOrder
  },
  setup() {
    const route = useRoute()
    const orderDetailStatus:number = Number(route.params.status) // 订单详情类型（1：已生成  2：未生成）
    return {
      orderDetailStatus
    }
  }
})
</script>

<style lang="scss" scoped>
.btn-group-box {
  .generate-btn {
    width: 88px;
    height: 40px;
    background: #182245;
    color: #fff;
  }
  .synchronize-btn {
    width: 88px;
    height: 40px;
    border: 1px solid #182245;
    background: #fff;
    color: #182245;
  }
  .next-btn  {
    color: #182245;
  }
}
</style>
